<template>
<div class="settingBox">
    <input type="file" @change="changePortrait" accept="image/*" class="input-file">
    <div class="MyComments commentBox">
        <div class="settingBoxLeft">头像</div>
        <div class="settingBoxRight">
            <img :src="portrait.indexOf('http') != -1 ? portrait : imgUrl+portrait" />
            <span class="rowBox"></span>
        </div>
    </div>
    <div class="MyComments commentBox">
        <div class="settingBoxLeft">昵称</div>
        <div class="settingBoxRight">
            <input type="text" v-model="nick" />
            <span class="rowBox"></span>
        </div>
    </div>
    <div class="saveBtn-warp">
      <div class="saveBtn" @click="saveBtn">保存</div>
    </div>
</div>
</template>

<script>
import {
    Toast
} from "mint-ui";
import wx from "weixin-js-sdk";
import controller from "@/components/controllers/controllers";
import url from "@/router/http_conf.js"
export default {
    name: "PersonalSettings",
    components: {},
    data() {
        return {
            accept: 'image/gif, image/jpeg, image/png, image/jpg',
            portrait: "",
            nick: "",
            imgUrl: url
        };
    },
    mounted() {
        let userInfo = localStorage.getItem("userInfo") ? JSON.parse(localStorage.getItem("userInfo")) : '';
        this.portrait = userInfo.portrait
        this.nick = userInfo.nick
    },
    methods: {
        // 切换头像
        changePortrait(e) {
            let file = e.target.files[0];
            let that = this;
            let type = file.type; //文件的类型，判断是否是图片
            let size = file.size; //文件的大小，判断图片的大小
            console.log("size", size)
            if (!type || that.accept.indexOf(type) == -1) {
                Toast("请上传图片格式")
                return false;
            }
            //图片的大小
            if ((size / 1024 / 1024) > 2) {
                Toast("请上传小于2M的图片")
                return false;
            }
            controller.picture(file).then(res => {
                console.log("res", res)
                that.portrait = res.baseData[0]
            }).catch(err => {});
        },
        // 保存按钮
        saveBtn() {
            let that = this;
            console.log("保存按钮");
            let params = {
                portrait: this.portrait,
                nick: this.nick,
            };
            controller.updateInfo(params).then((res) => {
                console.log("修改信息", res);
                Toast({
                    message: "修改成功",
                    duration: 1000,
                })
                that.getUserInfos()
            });
        },
        // 获取用户信息
        getUserInfos() {
            let that = this;
            controller
                .getUserInfo({
                    token: localStorage.getItem("token"),
                })
                .then((res) => {
                    console.log("获取用户信息", res);
                    let userInfos = res.baseData;
                    that.portrait = userInfos.portrait
                    that.nick = userInfos.nick
                    localStorage.setItem("userInfo", JSON.stringify(userInfos));
                });
        },
    },
};
</script>

<style lang="scss" scoped>
/*箭头*/
.rowBox {
    width: 15px;
    height: 15px;
    transform: rotate(45deg);
    display: inline-block;
    border-top: 2px solid #a8acbb;
    border-right: 2px solid #a8acbb;
    margin-left: 12px;
}

.settingBox {
    width: 100%;
    padding: 0 25px;
    box-sizing: border-box;
    background-color: #fff;

    .input-file {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 110px;
        z-index: 1000;
        opacity: 0;
    }

    .MyComments {
        width: 100%;
        height: 108px;
        border-bottom: 2px solid #f2f2f2;

        .settingBoxLeft {
            font-size: 30px;
            color: #323232;
            font-weight: 500;
        }

        .settingBoxRight {
            color: #a8acbb;
            font-size: 30px;
            display: flex;
            align-items: center;

            img {
                width: 68px;
                height: 68px;
                border-radius: 50%;
            }

            input {
                text-align: right;
                border: none;
            }

            .inputCame {
                width: 68px;
                height: 68px;
                position: absolute;
                opacity: 0;
            }
        }
    }

    .commentBox {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* 保存按钮 */
    .saveBtn-warp{
      padding: 0 24px;
      box-sizing: border-box;
      min-width: 640px;
      max-width: 960px;
      margin: 0 auto;
      position: absolute;
      bottom: 50px;
      left: 0;
      right: 0;
      margin: auto;
    }
    .saveBtn {
        width: 100%;
        height: 78px;
        background-color: #e66d4d;
        font-size: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 39px;
        color: #fff;
    }
}
</style>
